<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>List Organisations</title>

<style type="text/css">
a {
	text-decoration: none;
}

tr:hover td {
	background: #c7d4dd !important;
}

.filter label {
	cursor: pointer;
	color: #0033CC;
}
.dataTables_filter {
	display: none;
}

body {
	font-size: 140%;
}

body {
	padding-top: 70px;
}
</style>

<link rel="stylesheet" type="text/css"
	href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
	href="http://cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.css">
<script type="text/javascript" language="javascript"
	src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript"
	src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript"
	src="http://cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" language="javascript"
	src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="http://bootboxjs.com/bootbox.js"></script>
<script>
	$(document)
			.ready(
					function() {
						var table = $('#tablelist').DataTable({
							"paging" : true,
							"ordering" : true,
							"info" : true,
							"searching" : true,
							"pagelength": 15,
							"bLengthChange": false,
							"search" : {
								"regex" : true
							}
						});
						//table.column(0).search("^3|^1", true, true).draw();
						table.column(3).search("Yes").draw();
						table.page.len(15).draw();
						$('.filterlable').click(function() {
							var filtervalue = this.getAttribute('id');
							switch(filtervalue){
							case 'all':
								table.column(0).search("", true, true).draw();
								break;
							case '09':
								table.column(0).search("^1|^2|^3|^4|^5|^6|^7|^8|^9", true, true).draw();
								break;
							case 'ae':
								table.column(0).search("^a|^b|^c|^d|^e", true, true).draw();
								break;
							case 'fj':
								table.column(0).search("^f|^g|^h|^i|^j", true, true).draw();
								break;
							case 'kn':
								table.column(0).search("^k|^l|^m|^n", true, true).draw();
								break;
							case 'or':
								table.column(0).search("^o|^p|^q|^r", true, true).draw();
								break;
							case 'sv':
								table.column(0).search("^s|^t|^u|^v", true, true).draw();
								break;
							case 'wz':
								table.column(0).search("^w|^x|^y|^z", true, true).draw();
								break;
							}
						})
						$('#tablelist tbody')
								.on(
										'click',
										'tr',
										function() {
											if ($(this).hasClass('active')) {
												$(this).removeClass('active');
											} else {
												table.$('tr.active')
														.removeClass('active');
												$(this).addClass('active');
											}
											
											if (this.getElementsByTagName("td")[3].childNodes[0].nodeValue
													.trim() == "No") {
												var tr = this;
												bootbox.confirm("Do you want to make this Organization active?", function(result) {
													if (result === true) {
														//active org;
														id = tr
																.getAttribute("id");
														//window.location = "activeOragnisation/" + id;
														$
																.ajax({
																	url : "activeOragnisation.htm",
																	type : "POST",
																	data : 'orgID='
																			+ id,
																	success : function(
																			data) {
																	},
																	error : function() {
																	}
																});
														table.cell(table.row(tr).index(),3).data('Yes').draw();
													} else {
													}
													}); 
											//	var result = confirm("Do you want active this Organisation?");
												
											}
										});
						$("#tablelist tr td").css('cursor', 'pointer');

						//include check box event
						$("#includeinactive").click(function() {
							if (this.checked) {
								var table = $("#tablelist").DataTable();
								table.column(3).search("").draw();
							} else {
								var table = $("#tablelist").DataTable();
								table.column(3).search("Yes").draw();
							}
							//pager
						});
					});
</script>

</head>
<body>
	<%@ include file="header.jsp" %>
	<div class="container">
		<div id="organisationList" style="width: 800px; margin: 0 auto;">
			<h3 style="color: #006600">Organisation List</h3>
			<div style="height: 50px">
				<div id="filter" style="float: left; margin-top: 12px;"
					class="filter">
					<label id="all" class='filterlable'>All </label>|<label id="09"
						class='filterlable'> 0 - 9 </label>|<label id="ae"
						class='filterlable'> A B C D E </label> |<label id="fj"
						class='filterlable'> F G H I J </label>|<label id="kn"
						class='filterlable'> K L M N </label> |<label id="or"
						class='filterlable'> O P Q R </label>|<label id="sv"
						class='filterlable'> S T U V </label>|<label id="wz"
						class='filterlable'> W X Y Z </label>
				</div>
				<div style="float: right;">
					<a class="btn btn-primary btn-default" href="addOrganisation">Create</a>
					<input type="checkbox" id="includeinactive" />Include In-active?
				</div>
			</div>
			<div id="table">
				<c:if test="${!empty listOrganisations }">
					<table cellspacing="0" class="table table-striped table-bordered"
						id="tablelist" width="100%">
						<thead>
							<tr>
								<th>Organisation Name</th>
								<th>Head organisation address line 1</th>
								<th>Post code</th>
								<th>IsActive?</th>
							</tr>
						</thead>
						<tbody id="tbody">
							<c:forEach items="${listOrganisations}" var="organisation">
								<tr id="${organisation.orgID}"
									style="cursor: pointer; color: black;"
									class="org${organisation.orgID }">
									<td class="orgName">
									<a href="orgDetail?orgId=${organisation.orgID }" >${organisation.orgName}</a>
									</td>
									<td>${organisation.addressLine1}</td>
									<td>${organisation.address.postCode}</td>
									<td><c:if test="${organisation.isActive == true}">Yes</c:if>
										<c:if test="${organisation.isActive == false}">No</c:if></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</c:if>
			</div>
		</div>
	</div>
	<%@ include file="footer.jsp" %>
</body>
</html>